<template>
  <div class="mybody">
    <div class="detailbox">
      <div class="headTitle">
        <h1>{{ news.ntitle }}</h1>
        <h3>{{ news.nsubhead }}</h3>
      </div>
      <div v-html="news.ndetail" class="deal">
      </div>
      <!-- <img class="detailImg" :src="news.nimg">-->
      <div class="creaDate">
        发布时间：{{ news.createdate }}
      </div>

      <div class="bun">
        <el-col :span="10">

          <el-input v-model="input" placeholder="请输入内容">

          </el-input>
        </el-col>
        <div class="bun-on">
          <el-button type="danger" round @click="insert">发布评论</el-button>
        </div>
      </div>
      <div v-for="item in newsreviews" :key="item.id" class="nebox">
        <table class="mvc">
          <tr style="padding: 0">
            <td class="mvc-ts"><img :src="item.user.uimg" class="newimg"></td>
            <td class="mvc-left">{{ item.user.uname }}</td>
          </tr>
          <tr>
            <td class="nr">{{ item.newsreview }}</td>
          </tr>
        </table>

        <p class="ndate">{{ item.createdate }}</p>
      </div>

    </div>
  </div>

</template>

<script>
import doThis from "@/api/getData";
import moment from "moment";
import {ElMessage} from "element-plus";

export default {
  name: "NewsDetail",
  data() {
    return {
      news: {},
      id: 1,
      newsreviews: [],
      nrid: 1,
      input: '',
    }
  },
  methods: {
    insert() {
      if (localStorage.getItem("user") === null) {
        ElMessage.error("请先登录")
      } else {
        doThis.doGet("/newsreview/add", {newsreview: this.input, nid: this.id}).then(res => {
          console.log(res.data)
          this.newsreviews = res.data
        });
      }

    }
  },
  mounted() {
    this.id = this.$route.params.id
    doThis.doGet("/news/finById", {id: this.id}).then(res => {
      console.log(res.data)
      this.news = res.data
    });
    this.nrid = this.$route.params.nrid
    doThis.doGet("/news/findNewsRe", {nid: this.id}).then(res => {
      console.log(res.data)
      this.newsreviews = res.data
    });

  },
  watch: {
    news() {
      this.news.createdate = moment(this.news.createdate).format('YYYY年MM月DD日 HH:mm:ss')
    }
  }
}
</script>

<style scoped>
.mybody {
  background: #f5f5f5;
}

.detailbox {
  padding: 20px;
  background: #ffffff;
  margin: 20px auto;
  width: 1200px;
}

.detailbox * {
  padding: 10px;
}

.headTitle {
  text-align: center;
}

h3 {
  color: #868484;
}

.nr {

  position: relative;
  top: -20px;
  left: 50px;

}

.creaDate {
  text-align: right;
}

.detailImg {
  margin: 0 auto;
  width: 50%;
  height: 50%;
}

.mvc {

}

.newimg {
  width: 30px;
  height: 30px;
  border-radius: 25px;
}

.nebox {
  border: #8c939d;
  width: 1200px;
  position: relative;


}

.ndate {
  margin-left: 20px;
  color: darkgray;
  position: relative;
  top: -30px;
  font-size: 14px;
}

.bun {
  display: flex;
  flex-wrap: wrap;
}

.bun-on {
  margin-top: 20px;
}

.mvc-left {
  position: absolute;
  left: 80px;
  top: 30px;
  font-size: 18px;

}

.nr {
  color: #766e6e;
}

.deal {
  margin: 0 20px;
}
</style>